<template>
  <div class="cont">
      <Toptop :positionInfo='positionInfo' :weather='weather' :hotSearch='hotSearch'></Toptop>
      <Topbottom :swiperArray='swiperArray'></Topbottom>
    <hr/>
  
    <!-- 下半部分 -->
    <div v-if="loadComplete">
      <h2 class="bottom-h2">推荐商家</h2>
      <Bottom :nums='BottomList'></Bottom>
        <load-more tip="正在加载更多" style="margin: 4px auto;"></load-more>
    </div>
    <div v-else style="text-align: center;">
			<load-more tip="正在加载更多" style="margin: 4px auto;"></load-more>
		</div>

    <!--顶部-->
    <div class="dingbu" v-show='backTop' @click='backtop'>
      <span style="color:red;font-size:16px;">↑</span><br/>
      <span>顶<br/>部</span>
    </div>

  </div>
</template>

<script>
import bus from '../utils/bus.js'

import Bottom from '../components/Bottom'
import Toptop from '../components/Toptop'
import Topbottom from '../components/Topbottom'
// 经纬度计算的值
import Geohash from '../utils/geohash.js'

// 请求加载更多
import { Scroller, LoadMore } from 'vux'

export default {
  components: {
    Bottom,
    Toptop,
    Topbottom,
    Scroller,
    LoadMore
  },
  data() {
    return {
      weather: {}, // 天气
      hotSearch: [], // input搜索内容

      positionInfo: {}, // 位置信息
      // 经纬度
      latitude: 34.70748189,
      longitude: 113.6113746,

      swiperArray: [], // 轮播图数组

      BottomList: [], // 商店列表

      isLoading:false, //当前加载是否完成
      loadComplete: false,  //当前加载是否完成
      backTop: false, // 返回顶部
      // currentOffset: 0, // currentOffset是指当前屏幕左顶点的坐标,用于计算屏幕的偏移量
    }
  },
  mounted() {
    bus.latitude = this.latitude;
    bus.longitude = this.longitude;

    // 天气请求
    this.requestWeather()
    // 当前所在城市地址请求
    this.requestPosition()
    // 搜索请求
    this.requesthotSearch()
    // 轮播图数据内容的请求
    this.requestSwiper()
    // 下半部分--商店列表的请求
    this.requestbottomList()
    this.$el.onscroll = function (e) {
      //滚动偏移量
      var offset = e.target.scrollTop;
      this.currentOffset = offset;
      //元素本身高度
      var height = e.target.clientHeight;
      //元素的内容高度
      var contentHeight = e.target.scrollHeight;
      if (offset + height >= contentHeight - 20) {
        this.requestbottomList();
      }
      // 返回顶步
      if (offset > 400) {
				this.backTop = true;
			} else {
				this.backTop = false;
			}
     
    }.bind(this);
  },

  // scroll触发函数
  activated: function () {
    this.$el.scrollTop = this.currentOffset;
  },
  computed: {
    // 根据经纬度计算geohash
    gh() {
      // Geohash 过滤器
      return Geohash.encode(this.latitude, this.longitude, 12)
    }
  },
  methods: {
    // 当前所在城市地址请求
    requestPosition() {
      this.$ajax.get('ele/v2/pois/' + this.gh)
        .then(function (res) {
          // console.dir(res.data)
          this.positionInfo = res.data
        }.bind(this))
    },
    // 当前所在城市的天气信息
    requestWeather() {
      this.$ajax.get('ele/bgs/weather/current', {
        params: {
          latitude: this.latitude,
          longitude: this.longitude
        }
      }).then(function (res) {
        // console.dir(res.data)
        this.weather = res.data
      }.bind(this))
    },
    // 搜索请求信息
    requesthotSearch() {
      this.$ajax.get('ele/shopping/v3/hot_search_words', {
        params: {
          latitude: this.latitude,
          longitude: this.longitude
        }
      })
        .then(function (res) {
          // console.dir(res.data)
          this.hotSearch = res.data
        }.bind(this))
    },
    // 轮播图内容请求
    requestSwiper() {
      this.$ajax.get('ele/v2/index_entry', {
        params: {
          geohash: this.gh,
          group_type: 1,
          // 'flags': ['F']
        }
      })
        .then(function (res) {
          // console.dir(res.data)
          this.swiperArray = res.data
        }.bind(this))
    },
    // 商店列表的请求
    requestbottomList() {
      // 网络请求的判断 
      if (this.isLoading) {
        return
      }
      this.isLoading=true;

      this.$ajax.get('ele/shopping/restaurants', {
        params: {
          latitude: this.latitude,
          longitude: this.longitude,
          limit:20,
          offset:this.BottomList.length,
          // 设置offset页面向下取整,没二十个加载一个新的页面。
          // offset: Math.floor(this.BottomList.length / 20)
        }
      })
        .then(function(res) {
          console.dir(res.data)
          this.BottomList = this.BottomList.concat(res.data)   // concat合并多个数组拼接成一个新的数组
          this.isLoading = false;
					this.loadComplete = true;
      }.bind(this))
    },
    // 返回顶部
    backtop(){
      this.$el.scrollTop=0;
    }
  },
}
</script>

<style scoped>
.cont {
  height: calc(100vh - 70px);
  overflow: scroll
}

hr {
  margin: 0px;
  padding: 3px 0px;
  border: none;
  background-color: #F4F4F4;
}

.bottom-h2 {
  font-size: 14px;
  margin: 0px;
  padding: 5px 20px;
  /*padding-left: 10px;*/
  border-bottom: 1px solid #F7F7F7;
}



/* 返回顶部 */

.dingbu {
  width: 30px;
  height: 70px;
  position: fixed;
  bottom: 82px;
  right: 20px;
  border: solid 1px black;
  text-align: center;
  color: black;
  padding-top: 2px;
}

.dingbu span {
  font-size: 16px;
}
</style>
